<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <!--<link rel="stylesheet" href="css/iview.min.css">-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->
  <!-- This page CSS -->
  <!-- chartist CSS -->
  <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
  <!--c3 CSS -->
  <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
  <!--Toaster Popup message CSS -->
  <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
  <!-- Custom CSS -->
  <link href="css/style.min.css" rel="stylesheet">
  <!-- Dashboard 1 Page CSS -->
  <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <!-- <link href="../assets/node_modules/gridstack/gridstack.css" rel="stylesheet"> -->
  <!-- 待考证-->
  <link href="css/pages/other-pages.css" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
  <!--<link href="../assets/node_modules/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../assets/node_modules/bootstrap-table/dist/bootstrap-table.min.css" rel="stylesheet" type="text/css"/>-->
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
            <li class="nav-item"><a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a></li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="5"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">预约管理</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item">企业管理</li>
              <li class="breadcrumb-item active">预约管理</li>
            </ol>
          </div>
        </div>
        <!--列表-->
        <div class="row bgfff">
          <ul class="nav w100p nav-tabs customtab position-relative" role="tablist">
            <li class="nav-item" v-for="(v,k) in navs" :key="k">
              <a class="nav-link curpointer" data-toggle="tab" role="tab" :class="v.id == navs_id ? 'active' : '' " @click="changeNav(v.id)">
                <span class="hidden-sm-up">
                  <i class="ti-home"></i>
                </span>
                <span class="hidden-xs-down">{{v.title}}</span>
              </a>
            </li>
          </ul>
          <div class="clearfix p-t-20 w100p p-r-31 p-b-17">
            <div class="float-left d-flex p-l-30 fs14 cfff lh30 align-cen">
              <a href="/main/addAppointment.html" class="btn-success cfff hoverfff p-l-20 p-r-19 bradius4 m-r-10" v-if="navs_id == 1">发布商品</a>
              <span class="btn-success cfff hoverfff p-l-20 p-r-19 bradius4 m-r-10" v-if="navs_id == 2 " @click="addGoodsType">新建分类</span>
              <!--<span class="bgblue_2 p-l-20 p-r-19 bradius4 m-r-10">删除</span>-->
            </div>
            <div class="float-right d-flex align-cen">
              <select class="custom-select w105 m-r-10 bced" v-if="navs_id != 2" v-model="currentType">
                <option value="" class="cbcc">全部</option>
                <option v-for="(v,k) in allTypes" :key="v.productsTypeId" :value="v.productsTypeId">
                  {{v.productsTypeName}}
                </option>
              </select>
              <div class="m-r-21">
                <vuejs-datepicker input-class="form-control m-r-10 p-l-23 phgray bgfff" v-if="navs_id == 0" v-model="date" :clear-button="true" :language="language" format="yyyy-MM-dd" placeholder="请选择时间" name="uniquename">
                </vuejs-datepicker>
              </div>
              <div class="form-group m-b-0 w241 m-r-21" v-if="navs_id != 0">
                <input type="text" id="company" class="form-control p-l-23 phgray" :placeholder="navs_id == 1 ? '请输入商品名称' : '请输入分类名称' " v-model="clientkey">
              </div>
              <span class="btn-success w68 textc bradius4 m-r-10 cfff fs14 lh30" @click="search">查询</span>
            </div>
          </div>
          <div class="row w100p p-l-30">
            <div class="col-12">
              <div class="card m-b-0">
                <!--产品列表-->
                <template v-if="navs_id == 0">
                  <table class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa fixed-table text-ellipsis m-b-20">
                    <thead>
                      <tr>
                        <th>产品ID</th>
                        <th>产品名称</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>用户姓名</th>
                        <th>预约电话</th>
                        <th>下单时间</th>
                        <th>预约时间</th>
                        <th>备注</th>
                        <th>状态</th>
                        <th class="w200">操作</th>
                      </tr>
                    </thead>
                    <tbody class="bgfff">
                      <tr v-for="(v,k) in orderList" :key="k" class="curpointer">
                        <td>{{v.productsId}}</td>
                        <td :title="v.productsName">{{v.productsName}}</td>
                        <td :title="v.productsTypeName">{{v.productsTypeName}}</td>
                        <td>￥{{v.price}}</td>
                        <td>{{v.name}}</td>
                        <td>{{v.phone}}</td>
                        <td>{{v.createTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
                        <td>{{v.appointmentTime}}</td>
                        <td :title="v.remark">{{v.remark}}</td>
                        <td>{{v.state | state2str}}</td>
                        <td>
                          <span class="d-inline-block m-r-10 curpointer text-danger" @click="updateOrderState(v.appointmentId, 'cancel')" v-if="['1','2'].includes(v.state.toString())">
                            取消预约
                          </span>
                          <span class="d-inline-block curpointer cblue" @click="updateOrderState(v.appointmentId, 'use')" v-if="v.state == 1">
                            确认预约
                          </span>
                          <template v-if="!['1','2'].includes(v.state.toString())">
                            -
                          </template>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="textc" v-if="!orderList.length ">暂无数据</div>
                </template>
                <template v-if="navs_id == 1">
                  <table class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                    <thead>
                      <tr>
                        <th>产品ID</th>
                        <th class="w20p">产品</th>
                        <th>分类</th>
                        <th>价格</th>
                        <th>发布时间</th>
                        <th class="w20p">操作</th>
                        <th>排序</th>
                      </tr>
                    </thead>
                    <tbody class="bgfff">
                      <tr v-for="(v,k) in goodsList" :key="k" class="curpointer">
                        <td v-html="v.productsId"></td>
                        <td v-html="v.productsName" class="w20p"></td>
                        <td v-html="v.productsTypeName"></td>
                        <td>{{v.price}}</td>
                        <td>{{v.createTime | formatDate('yyyy/MM/dd hh:mm')}}</td>
                        <td class="w20p">
                          <a :href="'/main/addAppointment.html?id='+v.productsId">
                            <span class="d-inline-block m-r-40 c677 curpointer">编辑</span>
                          </a>
                          <span class="d-inline-block m-r-40 curpointer" @click="delGoodsInfo(v.productsId)">删除</span>
                        </td>
                        <td>
                          <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-up w16 h16 bced braduis50p" @click="moveGoods(v.productsId ,1)"></span>
                          <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-down w16 h16 bced braduis50p" @click="moveGoods(v.productsId ,2)"></span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="textc" v-if="!goodsList.length ">暂无数据</div>
                </template>
                <template v-if="navs_id == 2">
                  <table class="align-cen-table textc display nowrap table table-hover table-bordered bgf6f9fa m-b-20">
                    <thead>
                      <tr>
                        <th>编号</th>
                        <th class="w20p">分类名称</th>
                        <th class="w20p">商品数量</th>
                        <th>操作</th>
                        <th>排序</th>
                      </tr>
                    </thead>
                    <tbody class="bgfff">
                      <tr v-for="(v,k) in goodsTypeList" :key="k">
                        <td v-html="v.productsTypeId"></td>
                        <td class="w20p" v-html="v.productsTypeName"></td>
                        <td class="w20p" v-html="v.productsCount"></td>
                        <td>
                          <span class="d-inline-block m-r-40 curpointer" @click="addGoodsType(v.productsTypeId,v.productsTypeName)">编辑</span>
                          <span class="d-inline-block m-r-40 curpointer" @click="delGoodsType(v.productsTypeId)">删除</span>
                        </td>
                        <td>
                          <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-up w16 h16 bced braduis50p" @click="moveGoodsType(v.productsTypeId,1)"></span>
                          <span class="d-inline-block lh16 diy-circle-arrow m-r-40 mdi mdi-arrow-down w16 h16 bced braduis50p" @click="moveGoodsType(v.productsTypeId,2)"></span>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div class="textc" v-if=" !goodsTypeList.length">暂无数据</div>
                </template>
              </div>
              <!--分页-->
              <div class="d-flex p-b-50 jsend">
                <page-helper :page-number="page[navs_id]" :total-count="total[navs_id]" @change="jumpPage"></page-helper>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap popper Core JavaScript -->
  <!-- <script src="../assets/node_modules/bootstrap/js/popper.min.js"></script> -->
  <script src="js/bootstrap.min.js"></script>
  <!--<script src="js/iview.min.js"></script>-->
  <!--<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">-->
  <!--<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>-->
  <!-- slimscrollbar scrollbar JavaScript -->
  <script src="js/perfect-scrollbar.jquery.min.js"></script>
  <!--Wave Effects -->
  <!-- <script src="js/waves.js"></script> -->
  <!--Menu sidebar -->
  <script src="js/sidebarmenu.js"></script>
  <!--Custom JavaScript -->
  <script src="js/custom.min.js"></script>
  <!-- ============================================================== -->
  <!-- This page plugins -->
  <!-- ============================================================== -->
  <!--morris JavaScript -->
  <!-- <script src="../assets/node_modules/raphael/raphael-min.js"></script>
<script src="../assets/node_modules/morrisjs/morris.min.js"></script> -->
  <!--c3 JavaScript -->
  <!-- <script src="../assets/node_modules/d3/d3.min.js"></script>
<script src="../assets/node_modules/c3-master/c3.min.js"></script> -->
  <!-- Popup message jquery -->
  <!-- <script src="../assets/node_modules/toast-master/js/jquery.toast.js"></script> -->
  <!-- Chart JS -->
  <!--<script src="js/dashboard1.js"></script>-->
  <!-- ============================================================== -->
  <!-- Style switcher -->
  <!-- ============================================================== -->
  <!-- <script src="../assets/node_modules/styleswitcher/jQuery.style.switcher.js"></script> -->
  <script src="js/vue.js"></script>
  <!--<script src="js/layer/layer.min.js"></script>-->
  <!-- Draggable-portlet -->
  <!-- <script src="../assets/node_modules/jqueryui/jquery-ui.min.js"></script> -->
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>-->
  <script src="js/lodash.js"></script>
  <script src="js/gridstack.js"></script>
  <!-- <script src="../assets/node_modules/gridstack/gridstack.jQueryUI.js"></script> -->
  <script src="js/layer/layer.js"></script>
  <script src="js/vuejs-datepicker.min.js"></script>
  <script src="js/zh.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    let formatDate = Vue.filter('formatDate');

    var vw = new Vue({
      el: '#main-wrapper',
      components: { vuejsDatepicker },
      data: {
        username: '用户昵称',
        search_key: '', //搜索关键字
        navs: [
          { title: '预约列表', id: 0 },
          { title: '商品列表', id: 1 },
          { title: '产品分类', id: 2 },
        ],
        navs_id: 0,
        clientkey: '', //搜索商品或商品类型名称
        goodsList: [], //商品信息列表
        goodsTypeList: [], //商品类型列表
        allTypes: [], //商品下拉分类\
        orderList: [], // 订单列表
        currentType: '', // 当前选择的商品分类
        date: '',
        language: language,
        orderSearchParam: {}, // 订单列表搜索条件
        goodsParam: {}, // 订单列表搜索条件
        goodsTypeParam: {}, // 订单列表搜索条件
        page: {
          0: 1,
          1: 1,
          2: 1,
        },
        total: {
          0: 0,
          1: 0,
          2: 0,
        },
      },

      mounted() {
        this.getList();
        this.getAllGoodsType();
      },
      methods: {
        changeNav(id) {
          this.navs_id = id;

          this.reViewParam();
          this.getList();
        },
        jumpPage({ currentPage }) {
          this.$set(this.page, this.navs_id, currentPage);
          this.getList();
        },
        updateOrderState(id, type) {
          if (type === 'use') {
            layer.confirm('确定接受此预约吗？', {
              btn: ['确定', '取消']
            }, () => {
              this.changeOrderState({
                appointmentId: id,
                state: 2,
              });
            });
          } else {
            layer.prompt({ title: '请输入拒绝理由', formType: 0, value: '' }, (val, index) => {
              this.changeOrderState({
                appointmentId: id,
                state: 4,
                applyRemark: val,
              }).then(res => {
                layer.close(index);
              });
            });
          }
        },
        // 修改订单状态
        changeOrderState(params) {
          return $.cAjax('/crmPc/products/updAppointmentState', {
            data: params,
          }).then(res => {
            layer.msg("操作成功");
            this.getList();
          })
        },
        delGoodsInfo(id) { //删除商品信息
          layer.confirm('确定删除该商品？', {
            btn: ['确定', '取消']
          }, () => {
            $.cAjax('/crmPc/products/delProducts', {
              data: {
                productsId: id,
              }
            }).then((data) => {
              layer.msg("操作成功");
              // 加载数据
              this.getList();
            }).catch(function(err) {});
          });
        },
        // 移动商品
        moveGoods(id, type) {
          $.cAjax('/crmPc/products/moveProducts', {
            data: {
              productsId: id,
              type: type,
            }
          }).then((data) => {
            layer.msg("操作成功");
            // 加载数据
            this.getList();
          }).catch(function(err) {});
        },
        addGoodsType(id, name) { //添加/修改商品分类
          var param = {};
          if (id > 0) {
            param.productsTypeId = id;
          }
          layer.prompt({ title: '请输入类型名称', formType: 0, value: name }, (val, index) => {
            param.productsTypeName = val;
            $.cAjax('/crmPc/products/insertProductsType', {
              data: param
            }).then((data) => {
              layer.msg("操作成功");
              // 加载数据
              layer.close(index);
              this.getList();
            }).catch(function(err) {});
          });
        },
        delGoodsType(id) { //删除商品分类
          layer.confirm('确定删除该类型？', {
            btn: ['确定', '取消']
          }, () => {
            $.cAjax('/crmPc/products/delProductsType', {
              data: {
                productsTypeId: id,
              }
            }).then((data) => {
              layer.msg("操作成功");
              // 加载数据
              this.getList();
            }).catch(function(err) {});
          });
        },
        moveGoodsType(id, type) { //上移/下移商品分类
          $.cAjax('/crmPc/products/moveProductsType', {
            data: {
              productsTypeId: id,
              type: type,
            }
          }).then((data) => {
            layer.msg("操作成功");
            // 加载数据
            this.getList();
          }).catch(function(err) {

          });
        },
        // 重新之前显示参数
        reViewParam() {
          switch (this.navs_id) {
            case 0:
              this.currentType = this.orderSearchParam.productsTypeId || '';
              this.date = this.orderSearchParam.appointmentTime || '';
              break;
            case 1:
              this.currentType = this.goodsParam.productsTypeId || '';
              this.clientkey = this.goodsParam.productsName || '';
              break;
            case 2:
              this.clientkey = this.goodsTypeParam.productsTypeName || '';
              break;
            default:
              break;
          }
        },
        search() {
          switch (this.navs_id) {
            case 0:
              this.orderSearchParam = {
                productsTypeId: this.currentType,
                appointmentTime: this.date ? formatDate(this.date, 'yyyy-MM-dd') : '',
              };
              break;
            case 1:
              this.goodsParam = {
                productsTypeId: this.currentType,
                productsName: this.clientkey,
              };
              break;
            case 2:
              this.goodsTypeParam = {
                productsTypeName: this.clientkey,
              };
              break;
            default:
              break;
          }

          this.getList();
        },
        // 获取当前tabs列表数据
        getList() {
          let funObj = {
            0: 'getOrderList',
            1: 'getGoodsList',
            2: 'getGoodsTypeList',
          };

          this[funObj[this.navs_id]]();
        },
        // 获取预约列表
        getOrderList() {
          $.cAjax('/crmPc/products/selectAppointmentPage', {
            data: {
              pageNum: this.page[this.navs_id],
              ...this.orderSearchParam,
            }
          }).then(res => {

            if (res) {
              this.$set(this.total, this.navs_id, res.pageInfo.total);
              this.orderList = res.pageInfo.list.map(val => {
                let price;

                try {
                  price = JSON.parse(val.price);
                } catch (e) {
                  price = parseInt(val.price) || 0;
                }

                if (Object.prototype.toString.call(price).toLowerCase() === '[object number]') {
                  val.price = price.toFixed(2);
                } else {
                  val.price = price.map(val => parseInt(val)).join('~');
                }

                val.typeName = val.serviceType == '1' ? '到店' : '上门';
                val.appointmentTime = `${formatDate(val.startTime, 'yyyy-MM-dd hh:ss')} - ${formatDate(val.endTime, 'hh:ss')}`;

                return val;
              });
            } else {
              this.$set(this.total, this.navs_id, 0);
              this.orderList = [];
            }
          })
        },
        // 获取商品列表
        getGoodsList() {
          $.cAjax('/crmPc/products/selectProductsPage', {
            data: {
              pageNum: this.page[this.navs_id],
              ...this.goodsParam,
            }
          }).then(res => {
            this.$set(this.total, this.navs_id, res.pageInfo.total);
            this.goodsList = res.pageInfo.list.map(val => {
              let price;

              try {
                price = JSON.parse(val.price);
              } catch (e) {
                price = parseInt(val.price) || 0;
              }

              if (Object.prototype.toString.call(price).toLowerCase() === '[object number]') {
                val.price = price.toFixed(2);
              } else {
                val.price = price.map(val => parseInt(val)).join('~');
              }

              return val;
            });
          })
        },
        // 获取商品分类列表
        getGoodsTypeList() {
          $.cAjax('/crmPc/products/selectProductsTypePage', {
            data: {
              pageNum: this.page[this.navs_id],
              ...this.goodsTypeParam,
            }
          }).then(res => {
            this.$set(this.total, this.navs_id, res.pageInfo.total);
            this.goodsTypeList = res.pageInfo.list;
          });
        },
        // 获取全部商品类型
        getAllGoodsType() {
          $.cAjax('/crmPc/products/selectProductsTypeList', {
            data: {
              ignore: true,
            }
          }).then(res => {
            this.allTypes = res;
          })
        },
      },
      filters: {
        state2str(state) {
          let obj = {
            1: '待确认',
            2: '已确认',
            3: '已完成',
            4: '已取消',
            5: '已过期',
          };

          return obj[state];
        },
      }
    })
  })
  </script>
</body>

</html>
